<template>
    <div class="app-container">
        <div class="mixin-components-container">
            <el-row class="title">
                <span>售后编号：{{ number }}</span>
                <span>申请时间：{{ detail.create_time }}</span>
            </el-row>

            <el-row>
                <el-col :xs="8" :sm="8" :lg="8">
                    <div class="chart-wrapper" style="text-align:center">
                        <p class="order-status">售后单{{ detail.status == 0 ? '待审核' : (detail.status == 1 ? '已驳回' : '已完成')
                        }}</p>
                        <p class="text-color" v-if="detail.status == 0">请尽快完成订单售后处理，超时自动同意</p>
                        <p class="text-color" v-if="detail.status == 1">管理员已拒绝退款~</p>
                        <p class="text-color" v-if="detail.status == 2">管理员已申请退款</p>
                        <p>
                            <el-button v-if="detail.status == 0" size="small" type="danger" @click="applyyes(number)">
                                同意申请
                            </el-button>
                            <el-button v-if="detail.status == 0" size="small" type="primary" @click="applyno(number)">
                                拒绝退款
                            </el-button>
                        </p>
                    </div>
                </el-col>
                <el-col :xs="16" :sm="16" :lg="16">
                    <div class="chart-wrapper" style="border-left:0">
                        <el-steps :active="detail.status == 0 ? 1 : 3" align-center>
                            <el-step title="申请售后" :description="detail.create_time"></el-step>
                            <el-step :title="detail.status == 0 ? '待审核' : (detail.status == 1 ? '管理员已驳回' : '管理员已同意')"
                                :description="detail.audit_time"></el-step>
                            <el-step title="售后完成" :description="detail.audit_time"></el-step>
                        </el-steps>
                    </div>
                </el-col>
            </el-row>

            <el-row class="label-title">
                <el-col :xs="8" :sm="8" :lg="8">售后信息</el-col>
                <el-col :xs="8" :sm="8" :lg="8">付款信息</el-col>
                <el-col :xs="8" :sm="8" :lg="8">买家信息</el-col>
            </el-row>
            <el-row>
                <el-col :xs="8" :sm="8" :lg="8">
                    <div class="chart-wrapper-info">
                        <p><span>售后原因:</span>{{ detail.reason }}</p>
                        <p><span>售后描述:</span>{{ detail.remark }}</p>
                        <p><span>退款金额:</span>￥{{ detail.drawback.back_money }}</p>
                        <p><span>申请时间:</span>{{ detail.create_time }}</p>
                        <p><span>证据图:</span><img style="height: 60px;width: 60px;border:1px solid #ccc;padding: 1px;" v-bind="key" :key="image.url" :src="image" mode="" v-for="image in detail.image"></img></p>
                    </div>
                </el-col>
                <el-col :xs="8" :sm="8" :lg="8">
                    <div class="chart-wrapper-info">
                        <p><span>订单编号:</span>{{ detail.oid }}</p>
                        <p><span>付款方式:</span>{{ detail.payment_type == 1 ? '管理员支付' : '小程序支付' }}</p>
                        <p><span>付款时间:</span>{{ detail.order.order_pay_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                        <p><span>付款金额:</span>￥{{ detail.order.total_price }}</p>
                    </div>
                </el-col>

                <el-col :xs="8" :sm="8" :lg="8">
                    <div class="chart-wrapper-info" style="border-left:0">
                        <p><span>下单人:</span>{{ detail.member.username || '' }}</p>
                        <p><span>手机号:</span>{{ detail.member.tel}}</p>
                    </div>
                </el-col>
            </el-row>

            <el-table :data="detail.detail" style="width: 100%">
                <el-table-column label="商品" width="380">
                    <template slot-scope="{row}">
                        <img v-if="row.image" :src="row.image" class="avatar"
                            style="float:left;margin-right:5px;max-width: 80px;max-height: 80px;padding: 1px;border:1px solid #ddd;"></img>
                        <p class="goods-name">{{ row.goods_name }}</p>
                        <p class="goods-name" v-if="row.goods_spec">规格：{{ row.goods_spec }}</p>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="售后状态" align="center">
                    <template slot-scope="{row}">
                        {{ row.delivery_status == 1 ? '已发货' : '未发货' }}
                    </template>
                </el-table-column> -->
                <el-table-column prop="price_sell" label="价格" align="center"> </el-table-column>
                <el-table-column prop="nums" label="数量" align="center"> </el-table-column>
                <el-table-column label="优惠金额" align="center">
                    <template>0</template>
                </el-table-column>
                <el-table-column label="小计" align="center">
                    <template slot-scope="{row}">{{ row.price_sell * row.nums }}</template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import { detail, agree, refuse } from '@/api/order/after'
export default {
    data() {
        return {
            number: '',
            detail: {},
        }
    },
    beforeMount() {
        this.number = this.$route.query.number;
        this.info()
    },

    methods: {
        info: function () {
            //this.listLoading = true
            detail({ number: this.number }).then(response => {
                //this.listLoading = false
                this.detail = response.data
            })
        },
        applyno(number) {
            this.$prompt('请输入拒绝理由', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                refuse({ number: number, reason: value }).then(response => {
                    var msg = '操作成功'
                    var type = 'success';
                    if (!response.data) {
                        msg = '操作失败'
                        type = 'error'
                    } else {
                        this.getList()
                    }

                    this.$message({ type: type, message: msg });
                })

            }).catch();
        },
        applyyes(number) {
            this.$confirm('请确认是否同意退款操作？款项将返还至对方余额账户', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                agree({ number: number }).then(response => {
                    var msg = '操作成功'
                    var type = 'success';
                    if (!response.data) {
                        msg = '操作失败'
                        type = 'error'
                    } else {
                        this.getList()
                    }

                    this.$message({ type: type, message: msg });
                })

            }).catch();
        }
    },
}

</script>

<style>
.mixin-components-container {
    background-color: #fff;
    margin-top: 12px;
    min-height: calc(100vh - 84px);
    padding: 18px 30px;
    font-size: 12px;
}

.chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    border: 1px solid #f2f3f5;
    height: 180px;
}

.chart-wrapper-info {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    border: 1px solid #f2f3f5;
    height: 260px;
}

.title {
    line-height: 42px;
    height: 42px;
}

.title span {
    margin-right: 16px;
}

.order-status {
    font-size: 22px;
    font-weight: 700;
}

.label-title {
    text-align: center;
    background: #fcfcfc;
    height: 36px;
    line-height: 36px;
    border: 1px solid #f2f3f5;
    border-bottom: none;
}

.chart-wrapper-info span {
    text-align: right;
    margin-right: 12px;
    width: 30%;
    display: inline-block;
    color: #000;
}

.chart-wrapper-info {
    line-height: 18px;
    color: #666;
}

.text-color {
    color: #666;
}

.el-table {
    font-size: 12px;
}

.el-table thead th {
    background: #f8f8fa;
    color: #000;
    font-size: 12px;
    padding: 0;
    border-top: 1px solid #f2f3f5;
    height: 36px;
    line-height: 36px;
}

.el-table thead th:first {
    border-left: 1px solid #f2f3f5;
}

.el-table thead th:last-child {
    border-right: 1px solid #f2f3f5;
}

.goods-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 18px
}
</style>